<template>
  <a-page id="topics">
    <div slot="bar" v-if="instance" class="bg-img-center column flex-center" :style="{height: imgHeight+'px','background-image': 'url('+ instance.cover +')'}">
      <div><h1 class="size-32 bold text-black q-my-lg" style="margin: 0">{{ instance.title }}</h1></div>
      <div class="ellipsis size-18 bold">{{ instance.description }}</div>
    </div>
    <div v-if="instance" class="row justify-center">
        <a-map-image-boxes v-if="querySet" :maps="querySet"></a-map-image-boxes>
    </div>
    <div class="relative-position q-my-md">
      <a-loading :visible="loading" height="30px"></a-loading>
    </div>
  </a-page>
</template>

<script>
  import { querySetMixin } from '../components/mixin/request'

  export default {
    name: 'PageTopic',
    mixins: [querySetMixin],
    props: {
      attr: {
        type: [String, Number],
        required: true
      }
    },
    data () {
      return {
        api: '/api/topic/{id}/maps/',
        infinite: true,
        id: null,
        limit: 12,
        instance: null
      }
    },
    created () {
      this.getData()
    },
    computed: {
      imgHeight () {
        const windowWidth = this.$q.screen.width

        if (windowWidth > 1600) {
          return 360
        } else if (windowWidth > 1200) {
          return 340
        } else if (windowWidth > 800) {
          return 320
        } else if (windowWidth > 576) {
          return 220
        } else {
          return 180
        }
      }
    },
    methods: {
      async getData () {
        const { status, data } = await this.getRequest({
          api: '/api/topic/{id}/',
          id: this.attr
        })

        if (status === 200) {
          this.id = data.id
        }

        await this.query()
      }
    }
  }
</script>

<style lang="stylus">
</style>
